<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      window.onload = function () {
        var body = document.getElementsByTagName("body");

        /**
         * 在document中有一个属性body，它保存的是body的引用
         */

        var body = document.body;
        // document.documentElement保存的是html跟、根标签
        var html = document.documentElement;
        //  console.log(html);

        /**
         * document.all代表网页中所有元素
         */
        var all = document.all;

        //  console.log(all.length);
        // for (var i = 0; i < all.length; i++) {
        //   console.log(all[i]);
        // }

        // all = document.getElementsByTagName("*");
        // console.log(all.length);

        /**
         * 根据元素的class属性值查询一组元素节点对象
         * getElementsByClassName()可以根据class属性值获取一组元素节点对象
         */
        // var box1 = document.getElementsByClassName("box1");
        // console.log(box1.length);

        // 获取页面中所有的div
        var divs = document.getElementsByTagName("div");

        // 获取class为box1的所有的div
        //    .box div

        /**
         * document.querySelector()
         *    需要一个选择器的字符串作为参数，可以根据一个css选择器来查询元素节点对象
         * 该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
         *
         */
        // var div = document.querySelector(".box1 div");
        var div = document.querySelector(".box1");
        // console.log(div);

        /**
         * uerySelectorAll 该方法和querySelector()相似，不同的是它会将符合条件的元素封装到一个数组中返回
         * 即使符合条件的元素只有一个，也会返回数组
         */
        var box1 = document.querySelectorAll(".box1");
        console.log(box1.length);
      };
    </script>
  </head>
  <body>
    <div class="box1">
      <div>dddd</div>
    <div class="box1">
      <div>dddd</div>
    <div class="box1">
      <div>dddd</div>
    <div class="box1">
      <div>dddd</div>
    </div>
  </body>
</html>
